<template>
  <div class="page">
    <!-- 顶部栏 -->
    <van-nav-bar :border="false">
      <template #left>
        <div class="fz-16 fw-bold">{{ $t('市场详情') }}</div>
      </template>
    </van-nav-bar>

    <div class="container rel pt-0">
      <div class="box box-bg-2 mb-30">
        <div class="flex flex-wrap rel lh-2">
          <div style="width: 100%">
            <span>{{ $t('当前等级') }}：</span>
            <span>V1</span>
          </div>
          <div style="width: 50%">
            <span>{{ $t('直推股权总额') }}：</span>
            <span>200</span>
          </div>
          <div style="width: 50%">
            <span>{{ $t('间推股权总额') }}：</span>
            <span>100</span>
          </div>
          <div style="width: 50%">
            <span>{{ $t('直推总有效订单') }}：</span>
            <span>200</span>
          </div>
          <div style="width: 50%">
            <span>{{ $t('间推总有效订单') }}：</span>
            <span>200</span>
          </div>
          <div style="width: 50%">
            <span>{{ $t('直推剩余升级额') }}：</span>
            <span>15</span>
          </div>
          <div style="width: 50%">
            <span>{{ $t('间推剩余升级额') }}：</span>
            <span>200</span>
          </div>
          <div style="width: 100%">
            <span>{{ $t('总加速比例') }}：</span>
            <span>30%</span>
          </div>
          <div style="width: 100%">
            <span>{{ $t('下阶段考核时间') }}：</span>
            <span>5天</span>
          </div>
        </div>
      </div>

      <!-- 市场规则 -->
      <div class="mb-30">
        <div class="fz-16 fw-bold mb-10">{{ $t('市场规则') }}</div>

        <div class="table">
          <div class="th">
            <div class="td">{{ $t('等级') }}</div>
            <div class="td">{{ $t('直推业绩') }}</div>
            <div class="td">{{ $t('间推业绩') }}</div>
            <div class="td">{{ $t('考核周期') }}</div>
            <div class="td">{{ $t('比例') }}</div>
          </div>

          <div class="tr" v-for="(v, i) in 5" :key="i">
            <div class="td">1</div>
            <div class="td">400</div>
            <div class="td">900</div>
            <div class="td">7</div>
            <div class="td">10%</div>
          </div>
        </div>
      </div>

      <!-- 注意事项 -->
      <div class="ta-center mb-30">
        <div class="cl-error fz-16 mb-10">注意事项：</div>
        <div class="fz-12">
          直推业绩：每个合伙人每个考核周期，
          需完成指定的直推业绩目标，包括其本人下单的业绩。<br /><br />

          间推业绩：每个合伙人每个考核周期，
          需完成指定的间推业绩目标，这指其下级合伙人的下单业绩。<br /><br />

          考核周期：根据每个合伙人等级的设定而定。<br /><br />

          升降级条件：合伙人的升降级条件基于其直推和间推业绩。
          未能在每个考核周期中完成直推和间推业绩的合伙人将被降级。
          达到一定条件后，合伙人才有机会升级。<br /><br />

          降级：未能在每个考核周期中完成直推和间推业绩的合伙人将被降级。<br /><br />

          分红算法公式：全平台质押中10%x代理分红比例x下级总盈亏/等级平台总盈亏。
          （奖池持续累计模式）
        </div>
      </div>

      <!-- 市场下级 -->
      <div>
        <div class="fz-16 fw-bold mb-10">{{ $t('市场下级') }}</div>

        <!-- Tab切换 -->
        <ul class="flex flex-rb flex-wrap mb-15">
          <li
            class="btn click"
            :class="i === tabIndex ? 'active' : ''"
            v-for="(v, i) in tabs"
            :key="i"
            @click="onTabChange(i)"
          >
            {{ v }}
          </li>
        </ul>

        <!-- 明细 -->
        <ul>
          <li class="flex flex-rr cl-error">
            <span>{{ $t('总人数') }}：</span>
            <span>1000</span>
          </li>
          <li class="box box-bg-2 mt-10" v-for="(v, i) in 5" :key="i">
            <div class="flex flex-wrap rel lh-2">
              <div style="width: 100%">
                <span>{{ $t('用户钱包') }}：</span>
                <span class="cl-success">123123123</span>
              </div>
              <div style="width: 100%">
                <span>{{ $t('当前等级') }}：</span>
                <span>V1</span>
              </div>
              <div style="width: 50%">
                <span>{{ $t('直推股权总额') }}：</span>
                <span>200</span>
              </div>
              <div style="width: 50%">
                <span>{{ $t('间推股权总额') }}：</span>
                <span>100</span>
              </div>
              <div style="width: 50%">
                <span>{{ $t('直推总有效订单') }}：</span>
                <span>200</span>
              </div>
              <div style="width: 50%">
                <span>{{ $t('间推总有效订单') }}：</span>
                <span>200</span>
              </div>
              <div style="width: 50%">
                <span>{{ $t('直推剩余升级额') }}：</span>
                <span>15</span>
              </div>
              <div style="width: 50%">
                <span>{{ $t('间推剩余升级额') }}：</span>
                <span>200</span>
              </div>
              <div style="width: 100%">
                <span>{{ $t('总加速比例') }}：</span>
                <span>30%</span>
              </div>
              <div style="width: 100%">
                <span>{{ $t('下阶段考核时间') }}：</span>
                <span>5天</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tabs = ref([$t('直推'), $t('间推')])
const tabIndex = ref(0)

function onTabChange(i) {
  tabIndex.value = i
}
</script>

<style lang="scss" scoped></style>
